import Vue from 'vue'
import Vuex from 'vuex'
import { reqCategoryList, reqFloorList, reqGetBannerList } from '@/api';

// 需要使用插件一次
Vue.use(Vuex)
// 仓库存储数据
const state = {
    // 数组
    categoryList: [],
    //轮播图的数据
    bannerList: [],
    //floor数据
    floorList: [],

}

// 修改state的唯一手段
const mutations = {
    CATEGORYLIST(state, categoryList) {
        state.categoryList = categoryList;
    },
    GETBANNERLIST (state, value) {
        state.bannerList = value;
        console.log('在修改仓库中否bannerlist的数据');
      },
    MOCK_GET_BANNER_LIST(state, bannerList) {
        state.bannerList = bannerList
    },
    GETFLOORLIST(state, floorList) {
        state.floorList = floorList
    },
}
// 处理action，可以书写自己的业务逻辑，也可以处理异步
const actions = {
    async categoryList({commit}) {
        let result = await reqCategoryList();
        console.log('result:',result)
        if (result.code == 200) {
            commit('CATEGORYLIST',result.data)
        }
    },
    // 首页轮播图数据
    async getBannerList(context) {
        console.log('在向服务器发起ajax请求，获取轮播图数据');
        const req = await reqGetBannerList()
        if (req.code === 200) {
          context.commit('GETBANNERLIST', req.data)
        }
    },
    // 底部数据
    async getFloorList({commit}) {
        let result = await reqFloorList();
        if (result.code == 200) {
            console.log(result);
            commit('GETFLOORLIST',result.data)
        }
    }
    
}
// 理解为计算属性 用户简化仓库数据 让组件获取仓库数据更加方便
const getters = {}

export default {
    state,
    mutations,
    actions,
    getters
}